/**
 * @Author:刘忻忻，高志斐
 * @Date:2020/7/1
 * @Description:实名认证界面中间元件(除了顶部导航以外的部分)
 */
import { Picker, List, InputItem, Button, Toast, WingBlank } from 'antd-mobile';
import React from "react";
const districtData = require('./location.min.json');
const CustomChildren = props => (
    <div
        onClick={props.onClick}
        style={{ backgroundColor: '#fff', paddingLeft: 15, fontSize: '18px' }}
    >
        <div className="test" style={{ display: 'flex', height: '45px', lineHeight: '45px' }}>
            <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{props.children}</div>
            <div style={{ textAlign: 'right', color: '#888', marginRight: 15 }}>{props.extra}</div>
        </div>
    </div>
);

export default class Footer extends React.Component {
    state = {
        //地区数据
        data: [],
        type: 'money',
        hasError: false,
        //姓名
        name: '',
        //身份证长度
        card_id_maxLen: 18,
        //身份证号
        card_id: '',
        //手机号
        phoneNumber:'',
        //地区值
        pickerValue: [],
    };

    //变更姓名
    onChangeName = (name) => {
        this.setState({
            name
        })
    }

    //身份证错误提示
    onErrorClick = () => {
        if (this.state.hasError) {
            Toast.info('请输入18位身份证号');
        }
    }

    //输入手机号
    onChangePhone =(phoneNumber) =>{
        this.setState({
            phoneNumber
        })
    }
    //变跟校验身份证号
    onChange = (card_id) => {
        if (card_id.replace(/\s/g, '').length < 18) {
            this.setState({
                hasError: true,
            });
        } else {
            this.setState({
                hasError: false,
            });
        }
        this.setState({
            card_id
        });
    }

    nextStep(event) {
        if (this.state.name === "" || this.state.name === null) {
            Toast.info('姓名不能为空', 2);
        } else if (this.state.pickerValue.length === 0) {
            Toast.info('地区信息未选择', 2);
        } else if (this.state.card_id === "") {
            Toast.info('证件号不能为空', 2);
        } else if(this.state.phoneNumber ===""){
            Toast.info('手机号不能为空', 2);
        } else if(this.state.card_id.length !==18){
            Toast.info('身份证号位数不对', 2);
        }else if(this.state.phoneNumber.length !==11){
            Toast.info('手机号位数不对', 2);
        }
        else {
            //缓存用户输入的数据
            //获取地址字符串
            var dizhi = this.state.pickerValue;
            var qu = districtData[dizhi[0]].cities[dizhi[1]].districts[dizhi[2]]
            var shi = districtData[dizhi[0]].cities[dizhi[1]].name
            var sheng = districtData[dizhi[0]].name

            localStorage.setItem("userName",this.state.name);// 用户姓名
            localStorage.setItem("userCard",this.state.card_id);// 身份证号
            localStorage.setItem("userAddress",sheng + shi + qu);// 地址
            localStorage.setItem("userPhone",this.state.phoneNumber);// 电话号码

            //进入设置支付密码界面
            this.props.history.push("/setPassword")
        }
    }

    render() {

        let antdDistrict = [];

        Object.keys(districtData).forEach((index) => {
            let itemLevel1 = {};
            let itemLevel2 = {};
            itemLevel1.value = districtData[index].code;
            itemLevel1.label = districtData[index].name;
            itemLevel1.children = [];
            let data = districtData[index].cities;
            Object.keys(data).forEach((index) => {
                itemLevel2.value = data[index].code;
                itemLevel2.label = data[index].name;
                itemLevel2.children = [];
                let data2 = data[index].districts;
                let itemLevel3 = {};
                itemLevel3.children = [];
                Object.keys(data2).forEach((index) => {
                    itemLevel3.value = index;
                    itemLevel3.label = data2[index];
                    itemLevel2.children.push(itemLevel3);
                    itemLevel3 = {};
                });
                itemLevel1.children.push(itemLevel2);
                itemLevel2 = {};
            });
            antdDistrict.push(itemLevel1)
        });

        return (
            <div>
                <div>
                    <List renderHeader={() => '个人信息'}>
                        <InputItem
                            clear
                            placeholder="请输入您的姓名"
                            value={this.state.name}
                            onChange={this.onChangeName}
                        >姓名</InputItem>

                        <Picker extra="请选择地区"
                            data={antdDistrict}
                            title="地区"
                            value={this.state.pickerValue}
                            onChange={v => this.setState({ pickerValue: v })}
                            onOk={e => console.log('ok', e)}
                            onDismiss={e => console.log('dismiss', e)}>
                            <CustomChildren >地区</CustomChildren>
                        </Picker>
                    </List>
                </div>
                <div>
                    <List renderHeader={() => '证件信息'}>
                        <InputItem
                            clear
                            placeholder="请输入您的身份证号"
                            error={this.state.hasError}
                            onErrorClick={this.onErrorClick}
                            onChange={this.onChange}
                            value={this.state.card_id}
                            maxLength={this.state.card_id_maxLen}
                        >证件号码
                    </InputItem>
                        <InputItem
                            clear
                            placeholder="请输入您的手机号"
                            onChange={this.onChangePhone}
                            value={this.state.phoneNumber}
                        >手机号</InputItem>
                    </List>
                    <br />
                    <br />
                    <br />
                    <div style={{ textAlign: 'center' }}>
                        <WingBlank>
                            <Button
                                    style={{display: 'block', margin: '0 auto', backgroundColor: '#f8a83f', color: '#FFFFFF'}}
                                    onClick={this.nextStep.bind(this)}>
                                下一步
                            </Button>
                        </WingBlank>
                    </div>
                </div>
            </div>
        )
    }
}

